/**
 * @Author: zhi1hw hanwei@zhi1tech.com
 * @Date: 2024-07-08 16:10:26
 * @LastEditors: zhi1hw hanwei@zhi1tech.com
 * @LastEditTime: 2024-07-08 16:15:35
 * @FilePath: \code\src\views\common\audioPlayer.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import React, { useEffect, useState, useRef, useContext } from 'react';
import { Howl } from 'howler';
import horseSound from '@/assets/horse.ogg'; // 使用相对导入
import { ThemeContext } from '../../context/ThemeContext'; // 假设您创建了一个ThemeContext

const AudioPlayer = (props) => {
  const themeColor = useContext(ThemeContext);
  const [show, setShow] = useState(false);
  const soundRef = useRef(null);
  
  const playAudio = () => {
    soundRef.current?.play();
  };
  
  const pauseAudio = () => {
    soundRef.current?.pause();
  };
  
  const stopAudio = () => {
    soundRef.current?.stop();
  };
  
  // 相当于onMounted
  useEffect(() => {
    soundRef.current = new Howl({
      src: [horseSound],
      volume: 1.0,
    });
    
    // 相当于onUnmounted
    return () => {
      soundRef.current = null;
    };
  }, []);
  
  return (
    <div className="sound-recording">
      <button onClick={playAudio}>播放音频</button>
      <button onClick={pauseAudio}>暂停音频</button>
      <button onClick={stopAudio}>停止音频</button>
      
      {/* 样式部分 */}
      <style jsx>{`
        .area-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          color: ${themeColor.textColorLighten};
          font-size: 24px;
        }
        
        .area-item img {
          width: 86px;
          margin-bottom: 10px;
          border: 1px dashed ${themeColor.borderColorLighten};
          pointer-events: none;
        }
      `}</style>
    </div>
  );
};

export default AudioPlayer;